<template>
  <div class='container'>
    <el-row>
      <el-col :span='24'>
        <el-card>
          <div class="search">
            <el-row>
              <el-form class="form" label-width="100px" :model="orderParams">
                <el-col :span="8">
                  <el-form-item label="订单编号">
                    <el-input v-model="orderParams.orderNum" size="mini" placeholder="请输入订单编号"></el-input>
                  </el-form-item>
                  <el-form-item label="订单类型">
                    <el-select v-model="orderParams.type" placeholder="请选择"
                               style="width:100%">
                      <el-option
                        v-for="item in orderType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <!--                  <el-form-item label="支付单号">-->
                  <!--                    <el-input v-model="orderParams.payOrderNum" size="mini" placeholder="请输入支付单号"></el-input>-->
                  <!--                  </el-form-item>-->
                  <el-form-item label="用户手机号">
                    <el-input v-model="orderParams.mobile" size="mini" placeholder="请输入用户手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="商家编号">
                    <el-input v-model="orderParams.shopCode" size="mini" placeholder="请输入商家编号"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <!--                  <el-form-item label="订单状态" v-if="tabsName == -1">-->
                  <!--                    <el-select v-model="orderParams.status" @change="getAgentType()" placeholder="请选择"-->
                  <!--                               style="width:100%">-->
                  <!--                      <el-option-->
                  <!--                        v-for="item in statusType"-->
                  <!--                        :key="item.value"-->
                  <!--                        :label="item.label"-->
                  <!--                        :value="item.value">-->
                  <!--                        <span style="float: left">{{ item.label }}</span>-->
                  <!--                      </el-option>-->
                  <!--                    </el-select>-->
                  <!--                  </el-form-item>-->
                  <el-form-item label="商家名称">
                    <el-input v-model="orderParams.shopName" size="mini" placeholder="请输入商家名称"></el-input>
                  </el-form-item>
                  <el-form-item label="商家电话">
                    <el-input v-model="orderParams.serviceTel	" size="mini" placeholder="请输入商家电话"></el-input>
                  </el-form-item>
                </el-col>

                <el-col>
                  <el-form-item label="下单时间">
                    <div class="block">
                      <el-date-picker
                        v-model="value1"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="chooseTimeRange">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :offset="8">
                  <el-form-item>
                    <el-button @click="submitSearch()">搜索</el-button>
                    <el-button @click="clearListSearch">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>

          <div class="business-tabs">
            <el-tabs v-model="tabsName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="-1"></el-tab-pane>
              <el-tab-pane label="待付款" name="0"></el-tab-pane>
              <el-tab-pane label="支付成功" name="1"></el-tab-pane>
              <el-tab-pane label="已完成" name="2"></el-tab-pane>
              <el-tab-pane label="申请退款" name="4"></el-tab-pane>
              <el-tab-pane label="已取消" name="3"></el-tab-pane>
              <el-tab-pane label="已退款" name="5"></el-tab-pane>
            </el-tabs>
          </div>

          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">

            <div class="table-wrapper">
              <el-table
                :data="orderList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
                @selection-change="handleSelectionChange"
              >
                <!--                <el-table-column-->
                <!--                  type="selection"-->
                <!--                  align='center'-->
                <!--                  width="50">-->
                <!--                </el-table-column>-->
                <el-table-column
                  prop="orderNum"
                  label="订单编号"
                  align='center'
                  width="200">
                </el-table-column>
                <el-table-column
                  label="订单类型"
                  align='center'
                  width="80">
                  <template slot-scope="scope">
                    <span v-if="scope.row.type == 0">到店买单</span>
                    <span v-if="scope.row.type == 1">商品订单</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="orderDetails.shopName"
                  label="商家名称"
                  align='center'
                  width="100"
                  :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                  prop="orderDetails.shopCode"
                  label="商家编号"
                  align='center'
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="orderDetails.title"
                  label="商品名称"
                  align='center'
                  :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                  prop="money"
                  label="订单金额"
                  align='center'
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  label="订单状态"
                  align='center'
                  width="120">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">待付款</span>
                    <span v-if="scope.row.status == 1">已付款</span>
                    <span v-if="scope.row.status == 2">已使用</span>
                    <span v-if="scope.row.status == 3">已取消</span>
                    <span v-if="scope.row.status == 4">申请退款</span>
                    <span v-if="scope.row.status == 5">已退款</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="下单时间"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  v-if="tabsName == -1 || tabsName == 1 || tabsName == 2 || tabsName == 4 || tabsName == 5"
                  prop="payTime"
                  label="支付时间"
                  align='center'
                  width="100">
                </el-table-column>

                <el-table-column
                  v-if="tabsName == 2 || tabsName == -1"
                  prop="useTime"
                  label="核销时间"
                  align='center'
                  width="100">
                </el-table-column>

                <el-table-column
                  v-if="tabsName == 4 || tabsName == 5 || tabsName == -1 "
                  prop="updateTime"
                  label="申请退款时间"
                  align='center'
                  width="120">
                </el-table-column>

                <el-table-column
                  v-if="tabsName == 5 || tabsName == -1"
                  prop="updateTime"
                  label="退款时间"
                  align='center'
                  width="100">
                </el-table-column>

                <el-table-column
                  v-if="tabsName == 4"
                  align='center'
                  label="操作"
                  width="180">
                  <template slot-scope='scope'>
                    <el-col>
                      <el-button
                        type="text"
                        size="mini"
                        @click='goGoodDialog(scope.row)'
                      >
                        查看
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click='getOrderFunc(scope.row,scope.row.oldStatus)'
                      >
                        取消订单
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click='getOrderFunc(scope.row,5)'
                      >
                        审核通过
                      </el-button>
                    </el-col>

                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>

          <!-- 删除提示框 -->
          <el-dialog title="提示" :visible.sync="delVisible" width="300px" center :modal-append-to-body="false">
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="delVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteRow(goodsFuncParams.index)">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 查看商品提示框 -->
          <el-dialog :visible.sync="seeVisible" width="500px" center :modal-append-to-body="false">
            <div>
              <el-form :model="rejectList">
                <el-row>
                  <el-col>
                    <el-form-item label="退款状态:">
                      <span v-if="rejectList.type == 0">审核中</span>
                      <span v-if="rejectList.type == 1">商家审核驳回</span>
                      <span v-if="rejectList.type == 2">商家审核通过</span>
                      <span v-if="rejectList.type == 3">平台审核通过</span>
                      <span v-if="rejectList.type == 10">取消审核</span>
                    </el-form-item>
                    <el-form-item label="退款原因:"><span>{{rejectList.refundReason}}</span></el-form-item>
                    <el-form-item label="驳回原因:"><span>{{rejectList.refushReason}}</span></el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-dialog>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { formatDate } from 'src/utils/utils'
import { orderList, checkBusiness, orderDel, orderFunc } from '../../api/api'
import { MessageBox } from 'element-ui'

export default {
  data () {
    return {
      imageUrl: '',
      dialogFormVisible: false,
      orderList: [],
      tabsName: '-1',
      loading: true,
      orderParams: {
        orderNum: '',
        payOrderNum: '',
        mobile: '',
        payType: '',
        type: '',
        shopName: '',
        shopCode: '',
        serviceTel: '',
        startDate: '',
        endDate: '',
        timeType: '',
        sysUserId: '',
        shopId: '',
        title: '',
        id: '',
        status: '-1',
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId')
      },
      pageTotal: 0,
      goodsFuncParams: {
        index: 0,
        id: '',
        type: ''
      },
      checkBusiness: {
        type: '0',
        userId: sessionStorage.getItem('userId'),
        des: ''
      },
      value: '',
      multipleSelection: [],
      frozenList: [],
      editForm: [],
      delVisible: false,
      seeVisible: false,
      goodsInfoList: {
        productImageList: {}
      },
      rejectList: {},
      orderType: [{
        value: 0,
        label: '到店买单'
      }, {
        value: 1,
        label: '商品订单'
      }],
      value1: ''
    }
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    submitSearch () {
      this.getGoodsList()
    },
    // 格式化表单数据
    clearForm () {
      this.orderParams = {
        orderNum: '',
        payOrderNum: '',
        mobile: '',
        payType: '',
        type: '',
        shopName: '',
        shopCode: '',
        serviceTel: '',
        startDate: '',
        endDate: '',
        timeType: '',
        sysUserId: '',
        shopId: '',
        title: '',
        id: '',
        status: '-1',
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId')
      }
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
      this.value1 = ''
      this.getGoodsList()
    },
    showDialog (type) {
      this.checkBusiness.type = type
      if (this.multipleSelection.length !== 0) {
        console.log(`${type}`)
        this.dialogFormVisible = true
      } else {
        MessageBox.alert('至少选择一项', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'error'
        })
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    show (scope) {
      console.log(scope)
    },
    getReject (rejectType) {
      let obj = {}
      obj = this.rejectSelect.find((item) => { // 这里的userList就是上面遍历的数据源
        return item.value === rejectType // 筛选出匹配数据
      })
      console.log(obj.label)
      this.checkBusiness.type = rejectType
    },
    getCheckBusiness (type) {
      const length = this.multipleSelection.length
      this.checkBusiness.type = type

      // 转换shopIDS 数组为字符串
      this.frozenList = []
      for (let i = 0; i < length; i++) {
        this.frozenList.push(this.multipleSelection[i].shopId)
      }
      this.frozenList = this.frozenList.join(',')
      if (this.checkBusiness.des === '' & this.checkBusiness.type === -4 || this.checkBusiness.type === -5 || this.checkBusiness.type === -3) {
        MessageBox.alert('理由不能为空', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'error'
        })
      } else {
        const para = Object.assign({}, this.checkBusiness, {
          shopIds: this.frozenList
        })
        checkBusiness(para).then(res => {
          console.log(res)
          this.getGoodsList()
        })
      }
    },

    handleClick () {
      this.clearForm()
      this.orderParams.status = this.tabsName
      this.getGoodsList()
    },

    // 表格数据
    getGoodsList (type) {
      console.log()
      this.orderList = []
      const para = Object.assign({}, this.orderParams)
      orderList(para).then(res => {
        console.log(res)
        this.orderList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.orderParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.orderParams.pageSize = val
      this.getGoodsList()
    },
    goGoodDialog (row) {
      console.log(row)
      this.seeVisible = true
      const para = Object.assign({}, { orderNum: row.orderNum })
      orderDel(para).then(res => {
        console.log(res)
        this.rejectList = res.data
      })
    },
    getOrderFunc (row, num) {
      console.log(row)
      console.log(num)
      // this.orderParams.status = row.status
      const para = Object.assign({}, { orderNum: row.orderNum, status: num })
      orderFunc(para).then(res => {
        console.log(res)
        this.getGoodsList()
      })
    },
    chooseTimeRange (value) {
      console.log(value) // 结果为一个数组，如：["2018-08-04", "2018-08-06"]
      for (var x in value) {
        this.orderParams.startDate = value[0]
        this.orderParams.endDate = value[1]
      }
    }
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd/hh:mm:ss')
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .search {
      margin: 0 0 20px 0;
    }

    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }
  }
</style>
